<template>
  <div>

    <div class="qup-title-box"><span class="border" /><span>走访问题信息</span></div>
    <el-table
      v-loading="dataLoading"
      :data="tableProblmeData"
      border
      max-height="300"
      :header-cell-style="{background:'#F6F6F6', borderRight:'1px solid #EBEEF5'}"
      style="width: 100%;margin-bottom:60px"
      highlight-current-row
      @selection-change="selectionChangeHandle"
    >
      <el-table-column type="index" width="50" />
      <el-table-column type="selection" width="55" />
      <el-table-column show-overflow-tooltip prop="floorCode" label="走访楼层">
        <template slot-scope="scope">
          <c-dict-select v-model="scope.row.floorCode" disabled dict-type-code="FLOOR" />
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="areaId" label="走访区域">
        <template slot-scope="scope">
          {{ formaterData(areaList,scope.row.areaId,'areaName','id') }}
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="problemClass" label="问题分类" />
      <el-table-column min-width="130" show-overflow-tooltip prop="problemNotes" label="问题描述" />
      <el-table-column label="整改前">
        <template slot-scope="scope">
          <import-img
            :photo-list="scope.row.fileList1"
            readonly
            file-type="整改前"
            :config-attachment-id="configIdBefore"
          />
        </template>
      </el-table-column>
      <el-table-column label="整改后">
        <template slot-scope="scope">
          <import-img
            :photo-list="scope.row.fileList2"
            file-type="整改后"
            readonly
            :other-param="scope.$index"
            :config-attachment-id="configIdAfter"
          />
        </template>
      </el-table-column>
      <el-table-column width="120" show-overflow-tooltip prop="status" label="整改情况">
        <template slot-scope="scope">
          <c-dict-select v-model="scope.row.status" disabled dict-type-code="RECTIFICATION_SITUATION" />
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="specialNo" label="特殊流程编号" />
    </el-table>
  </div>
</template>
<script>
import importImg from '@/components/importImg/miniUpload'
import { getAreaList } from '@/api/common'
import { getDictByPatchType } from '@/api/dataDict'
import { formaterData } from '@/utils'
import { queryPatrolQuestionList, queryProblemClassList } from '@/api/marketService/dailyPatrol'
export default {
  name: 'PatrolQuestion',
  components: { importImg },
  props: {
    patrolId: {
      type: String,
      default: ''
    },
    rectifyNo: {
      type: String,
      default: ''
    },
    isDetail: {
      type: [Number, Boolean],
      default: false
    },
    picConfigId: {
      type: String,
      default: ''
    },
    configIdBefore: {
      type: String,
      default: ''
    },
    otherParam: {
      type: String,
      default: ''
    },
    schedule: {
      type: String,
      default: ''
    },
    model: {
      type: String,
      default: ''
    },
    configIdAfter: {
      type: String,
      default: ''
    },
    noCount: {
      type: Boolean,
      default: false
    },
    noBtns: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formaterData,
      renderKey: false,
      dataLoading: false,
      dlgVisible: false,
      pageType: '',
      propTable: [],
      editForm: {},
      acceptProblemList: [],
      tableSelected: [],
      saveLoading: false,
      tableProblmeData: [],
      statusOptions: [],
      sampleInstallationOption: [],
      areaList: [],
      editRules: {
        floorCode: [{ required: true, message: '请选择', trigger: 'change' }],
        areaId: [{ required: true, message: '请选择', trigger: 'change' }],
        acceptProblemId: [{ required: true, message: '请选择', trigger: 'change' }],
        fileList1: [{ required: true, type: 'array', message: '请上传', trigger: 'change' }]
      }
    }
  },
  watch: {
    rectifyNo: {
      handler(v) {
        if (!v) return
        // this.refreshTable()
      },
      deep: true,
      immediate: true
    }
  },
  async created() {
    const { RECTIFICATION_SITUATION, SAMPLE_INSTALLATION } = await getDictByPatchType(['RECTIFICATION_SITUATION', 'SAMPLE_INSTALLATION'])
    this.statusOptions = RECTIFICATION_SITUATION
    this.sampleInstallationOption = SAMPLE_INSTALLATION.map(v => v.dictName)
    this.refreshTable()
    const { type } = this.$route.query
    this.pageType = type
    queryProblemClassList().then(res => {
      if (res.success) this.acceptProblemList = res.data.records || []
    })
    getAreaList().then(res => {
      if (res.success) this.areaList = res.data.records || []
    })
  },
  methods: {

    getValid(type) { // type为1表示提交，路由的type2代表校验整改状态
      if (type && this.$route.query.type === '2' && this.tableProblmeData.filter(v => v.status === 'A').length) return false
      else return true
    },
    closeDialog() {
      this.dlgVisible = false
      this.editForm = {}
    },

    // 刷新表格
    refreshTable() {
      this.dataLoading = true
      queryPatrolQuestionList(this.patrolId).then(res => {
        if (res.success) {
          res.data.records.map(v => {
            this.$set(v, 'fileList1', (v.shopAttachmentDTOList || []).filter(v => v.configAttachmentId === this.configIdBefore))
            this.$set(v, 'fileList2', (v.shopAttachmentDTOList || []).filter(v => v.configAttachmentId === this.configIdAfter))
            this.$set(v, 'problemClass', this.formaterData(this.acceptProblemList, v.acceptProblemId, 'problemClass', 'id'))
          })
          let tempArr = []
          if (this.noBtns) tempArr = res.data.records.filter(v => v.status === 'A')
          if (this.otherParam === 'A') { // 安装问题
            this.tableProblmeData = tempArr.filter(v => this.sampleInstallationOption.includes(v.problemClass))
          } else if (this.otherParam === 'B') { // 非安装问题
            this.tableProblmeData = tempArr.filter(v => !this.sampleInstallationOption.includes(v.problemClass))
          } else {
            this.tableProblmeData = res.data.records
          }
        }
        this.dataLoading = false
      }).catch(() => {
        this.dataLoading = false
      })
    },
    selectionChangeHandle(rows) {
      this.tableSelected = rows
      if (this.noBtns) this.$emit('select', rows)
    },
    getData() {
      return this.otherFiles.map(v => { return { ...v.response.data, modelId: this.patrolId } })
    }
  }
}
</script>
